<template>
  <div>
    <el-dialog
      title="高级检索"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <div class="content">
        <div class="select-area">
          <el-select
            class="select-box"
            v-model="searchData.projectId"
            placeholder="请选择图谱"
            @change="handleProjectChange()"
          >
            <el-option
              v-for="item in graphList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </div>
        <div
          v-for="(item, index) in searchData.searchPropList"
          :key="index"
          class="select-area"
        >
          <!-- 查询条件 -->
          <el-select v-model="item.condition">
            <el-option
              v-for="item in conditionList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <!-- 属性选择 0 实体 1 关系 2 属性 -->
          <el-select v-model="item.type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            class="col-span-6"
            v-if="item.type === 0"
            v-model="item.entityName"
            placeholder="请输入实体名称"
          ></el-input>
          <el-input
            v-if="item.type === 1"
            class="col-span-2"
            v-model="item.headEntityName"
            placeholder="头实体名称"
          >
          </el-input>
          <el-input
            v-if="item.type === 1"
            class="col-span-2"
            v-model="item.relationName"
            placeholder="关系名称"
          >
          </el-input>
          <el-input
            v-if="item.type === 1"
            class="col-span-2"
            v-model="item.tailEntityName"
            placeholder="尾实体名称"
          >
          </el-input>
          <el-select
            v-if="item.type === 2"
            v-model="item.ontologyId"
            class="col-span-2"
            placeholder="实体类别"
            @change="getAimAttribute(item)"
          >
            <el-option
              v-for="e in aimList"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
          <el-select
            v-if="item.type === 2"
            v-model="item.propId"
            class="col-span-2"
            placeholder="属性名"
            @focus="attrChange(item)"
          >
            <el-option
              v-for="i in item.attributeList"
              :key="i.propertyId"
              :label="i.propertyName"
              :value="i.propertyId"
            ></el-option>
          </el-select>
          <el-input
            v-if="item.type === 2"
            class="col-span-2"
            v-model="item.propValue"
            placeholder="属性值"
          >
          </el-input>
          <div
            v-if="searchData.searchPropList.length >= 1"
            class="col-end-10 flex-center-center"
          >
            <img
              v-if="index !== 0"
              src="~@/assets/img/delete.png"
              @click="deleteItem(item)"
            />
            <img
              v-if="index + 1 === searchData.searchPropList.length"
              src="~@/assets/img/add.png"
              @click="addItem()"
            />
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="goSearch">检 索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    position: {
      type: String,
      default: "search",
    },
    graphList: {
      type: Array,
    },
  },
  data() {
    return {
      dialogVisible: false,
      conditionList: ["AND", "OR", "NOT"],
      typeList: [
        {
          label: "实体",
          value: 0,
        },
        {
          label: "关系",
          value: 1,
        },
        {
          label: "属性",
          value: 2,
        },
      ],
      aimList: [],
      searchData: {
        projectId: "",
        bilingual: false,
        searchKey: "",
        translateKey: "",
        searchPropList: [
          {
            type: 0,
            condition: "AND",
            entityName: "",
            headEntityName: "",
            tailEntityName: "",
            relationName: "",
            propId: "",
            propValue: "",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setSearchData: "search/SET_SEARCHDATA",
    }),
    // 初始化查询数据
    initSearchData() {
      const searchData = this.$store.state.search.searchData;
      if (searchData && searchData.searchPropList) {
        this.searchData = { ...searchData };
      } else {
        this.searchData = {
          projectId: "",
          bilingual: false,
          searchKey: "",
          translateKey: "",
          searchPropList: [
            {
              type: 0,
              condition: "AND",
              entityName: "",
              headEntityName: "",
              tailEntityName: "",
              relationName: "",
              propId: "",
              propValue: "",
            },
          ],
        };
      }
    },
    // 显示弹窗
    show() {
      this.initSearchData();
      this.getEntityType();
      this.dialogVisible = true;
    },
    close() {
      this.searchData = {
        projectId: "",
        bilingual: false,
        searchKey: "",
        translateKey: "",
        searchPropList: [
          {
            type: 0,
            condition: "AND",
            entityName: "",
            headEntityName: "",
            tailEntityName: "",
            relationName: "",
            propId: "",
            propValue: "",
            ontologyId: "",
            attributeList: [],
          },
        ],
      };
      this.dialogVisible = false;
    },
    // 实体类别
    getEntityType() {
      if (!this.searchData.projectId) {
        return;
      }
      this.$axios
        .get(
          `${this.$api.search.searchApi.getAimTypeList}?projectId=${this.searchData.projectId}`
        )
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            this.aimList = data;
          }
        });
    },
    // 处理图谱改变
    handleProjectChange() {
      this.searchData.searchPropList.forEach((item) => {
        if (item.type === 2) {
          item.propValue = "";
          item.ontologyId = "";
          item.propId = "";
        }
      });
      this.getEntityType();
    },
    // 属性名改变
    attrChange(val) {
      if (val.ontologyId.length === 0) {
        this.$message.warning("请先选择实体类别");
      }
    },
    // 属性名
    getAimAttribute(item) {
      item.propId = "";
      this.$axios
        .get(
          `${this.$api.search.searchApi.getAimAttributeByType}?ontologyId=${item.ontologyId}`
        ).then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            // item.attributeList = data;
            this.$set(item, 'attributeList', data)
          }
        });
      // getAimAttributeByType(item.ontologyId).then((res) => {
      //   item.attributeList = res.data;
      // });
    },
    // 删除某一项
    deleteItem(item) {
      this.searchData.searchPropList = this.searchData.searchPropList.filter(
        (i) => i !== item
      );
    },
    // 添加一项
    addItem() {
      this.searchData.searchPropList.push({
        type: 0,
        condition: "AND",
        entityName: "",
        headEntityName: "",
        tailEntityName: "",
        relationName: "",
        propId: "",
        propValue: "",
        ontologyId: "",
        attributeList: [],
      });
    },
    // 检索
    goSearch() {
      if (!this.searchData.projectId) {
        return this.$message.error("请选择图谱");
      }
      if (this.position === "search") {
        // 检索页面
        this.setSearchData({
          ...this.searchData,
          type: "advanced",
        });
        this.$router.push({ name: "ResultPage" });
      } else {
        this.setSearchData({
          ...this.searchData,
          type: "advanced",
        });
        // 结果页面
        this.$emit("reSearch", "advanced");
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  color: #ffffff;
  background: linear-gradient(135deg, #0e3e72 0%, rgba(1, 5, 10, 0.9) 100%);
  box-shadow: 0px 2px 4px 0px #061b30,
    inset 0px 0px 10px 8px rgba(34, 181, 244, 0.33);
  border: 1px solid #0086ff;
  .el-dialog__header {
    padding: 8px 20px;
    background: url("~@/assets/img/弹窗标题框-560.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    .el-dialog__title {
      font-weight: normal;
      font-size: 24px;
      color: #ffffff;
      line-height: 36px;
      text-shadow: 0px 2px 4px #0485da;
      text-align: right;
      font-style: oblique;
    }
    .el-dialog__close {
      color: #ffffff;
      font-weight: bold;
    }
  }
  .el-dialog__footer {
    .el-button--default {
      color: #ffffff;
      background: rgba(3, 23, 46, 0.4);
      border: 1px solid #0180db;
      border-radius: 4px;
    }
    .el-button--primary {
      background: rgba(0, 170, 255, 0.28);
      box-shadow: inset 0px 0px 4px 4px rgba(130, 213, 254, 0.28);
      border-radius: 4px;
      border: 1px solid #00aaff;
    }
  }
}
.content {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
  .select-area {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 16px;
    .select-box {
      width: 100%;
      grid-column-start: 2;
      grid-column-end: 9;
    }
  }
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-end-10 {
  grid-column-end: 10;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.flex-center-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    margin: 0 8px;
    cursor: pointer;
  }
}
::v-deep {
  .el-input__inner {
    color: #ffffff;
    background: rgba(3, 23, 46, 0.4);
    box-shadow: inset 0px 0px 3px 0px #0180db;
    border: 1px solid #043661;
  }
  .el-input__inner:hover {
    border: 1px solid lighten(#043661, 30%);
  }
  .el-input__inner::-webkit-input-placeholder {
    color: #527ba9;
  }
}
</style>
